<template>
	<div class="toubu">
		<h2>文创小区</h2>
		<el-button type="primary" round size="large" @click="dialogVisible = true">添加商品</el-button>
	</div>
	<el-dialog
    v-model="dialogVisible"
    title="添加商品"
    width="500"
  >
  		<form @submit.prevent="add">
  			
  				
  						<div class="input-group mb-3">
  							<span>商品名称</span>
  							<el-input type="text" class="form-control" placeholder="请输入商品名" v-model.trim="subject"/>
  						</div>
  			
  				
  				
  					<div class="input-group mb-3">
  						<span class="input-group-text" id="basic-addon1">分类</span>
  						<el-input class="form-control" v-model.trim="content" placeholder="请输入类别"></el-input>
  					</div>
  				
  				
  				
  					<div class="input-group mb-3">
  						<span class="input-group-text" id="basic-addon1">销量</span>
  						<el-select class="form-select form-select-sm" v-model="selectedOption">
  							<el-option v-for="option in options" :value="option.place" :key="option.placeCode">
  								{{ option.place }}
  							</el-option>
  						</el-select>
  					</div>
  				
  				
  					<div class="input-group mb-3">
  						<span class="input-group-text" id="basic-addon1">照片</span>
  						<el-select class="form-select form-select-sm" v-model="sp">
  							<el-option v-for="option in p" :value="option.img" :key="option.id">{{ option.img }}</el-option>
  						</el-select>
  					</div>
  				
  				
  				<div class="col-auto">
  					<button type="submit" class="btn btn-primary">添加</button>
  				</div>
  		
  		</form>
  </el-dialog>
  
  
  <table class="table table-striped table-hover table-bordered">
  	<thead>
  		<tr>
  			<th scope="col" width="200px">序号</th>
  			<th scope="col" width="100px">商品名称</th>
  			<th scope="col" width="400px">图片</th>
  			<th scope="col" width="100px">分类</th>
  			<th scope="col" width="100px">销量</th>
  			<!-- <th scope="col">状态</th> -->
  			<th scope="col" width="300px">操作</th>
  		</tr>
  	</thead>
  	<tbody>
  		<tr v-for="item in list" :key="item.id">
  			<td>{{item.id}}</td>
  			<td>{{item.subject}}</td>
  			<td><img :src="item.img" alt="item.subject"/></td>
  			<td>{{item.content}}</td>
  			<td>{{item.place}}</td>
  			<!-- <td>
  				<div class="form-check form-switch">
  					<input class="form-check-input" type="checkbox" role="switch" :id="'cb' + item.id" v-model="item.status"/>
  					<label class="form-check-label" :for="'cb' + item.id" v-if="item.status">预售</label>
  					<label class="form-check-label" :for="'cb' + item.id" v-else="item.status">售卖</label>
  				</div>
  			</td> -->
  			<td>
  				<a href="javascript:;" @click="remove(item.id,item.status)">购买</a>
					<a href="javascript:;" @click="delTodo(item.id,item.status)">删除</a>
  			</td>
  		</tr>
  	</tbody>
  </table>
  
</template>
<script setup>
import { ref } from 'vue'

const dialogVisible = ref(false)
const list = ref([
	{
		id: 1,
		subject: '京剧脸谱盖碗',
		content: '陶瓷',
		place: '1000+',
		status: false,
		img:'/1.png'
	},
	{
		id: 2,
		subject: '京剧风发钗发梳',
		content: '文创',
		place: '3000+',
		status: false,
		img:'/5.png'
	},
	{
		id: 3,
		subject: '精致胸针',
		content: '文创',
		place: '1000+',
		status: false,
		img:'/2.png'
	},
])
let remove = (id, status) =>{
		if (status) {
			lst.value = list.value.filter(item => item.id !== id)
		}else{
			alert('预售无法购买！')
		}
	}
		let subject = ref('')
		let content = ref('')
		let nextId = ref('')
		let selectedOption = ref('')
		let options = ref([
				{placeCode: 0, place: '1000+'},
				{placeCode: 1, place: '3000+'},
				{placeCode: 2, place: '5000+'},
				{placeCode: 3, place: '10000+'},
			])
let sp = ref('')
		let p = ref([
			{id:0,img:'/1.png'},
			{id:1,img:'/2.png'},
			{id:2,img:'/3.png'},
			{id:3,img:'/4.png'},
			{id:4,img:'/5.png'},
		])
		let add =()=>{
			if(subject.value===''){
				alert('商品名为必填项！')
				return
			}
			nextId.value = Math.max(...list.value.map(item => item.id)) +1
			const obj = {
				id:nextId.value,
				subject:subject.value,
				img:sp.value,
				content:content.value,
				place:selectedOption.value,
				status:false
			}
			list.value.push(obj)
			subject.value =''
			content.value =''
			sp.value=''
			selectedOption.value='1000+'
		}
		
		let delTodo = (id, status) => {
    list.value = list.value.filter(item => item.id!== id);
};
		
	
</script>

<style lang="less" scoped>
a{
	text-decoration: none;
	margin: 10px;
	color: red;
	font-size: 16px;
}
  .toubu{
		display: flex;
		justify-content: space-between;
	}
	.col-auto{
		width: 500px;
	}
	.col-auto button{
		background-color: aqua;
		width: 50px;
		height: 30px;
		border-radius: 20px;
	}
	.input-group{
		width: 400px;
		display: flex;
		margin:20px;
		font-size: 18px;
	} 
	.input-group span{
		width:50px;
		margin:0 20px;
	}
	.table{
		width: 800px;
		height: 500px;
		border: 1px;
		text-align: center;
		margin:0 auto;
	}
</style>